import React from "react";
import { Button, Form, Input, Space } from 'antd';

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const validateMessages = {
    required: '${label} is required!',
    types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
    },
    number: {
        range: '${label} must be between ${min} and ${max}',
    },
};
function Message() {

    const onFinish = (values) => {
        // console.log(values);
    };
    return (
        <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
            <Form.Item
                name="password"
                label="原始密码："
                rules={[
                    {
                        type: 'email',
                    },
                ]}
                labelCol={{

                    span: 6,
                }}
                wrapperCol={{
                    span: 8,
                }}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name='newpassword'
                label="新密码："
                rules={[
                    {
                        type: 'email',
                    },
                ]}
                labelCol={{

                    span: 6,
                }}
                wrapperCol={{
                    span: 8,
                }}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name='verifypassword'
                label="重复密码："
                rules={[
                    {
                        type: 'email',
                    },
                ]}
                labelCol={{

                    span: 6,
                }}
                wrapperCol={{
                    span: 8,
                }}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name='email'
                label="邮箱："
                rules={[
                    {
                        type: 'email',
                    },
                ]}
                labelCol={{

                    span: 6,
                }}
                wrapperCol={{
                    span: 8,
                }}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name='qq'
                label="QQ号码: "
                rules={[
                    {
                        type: 'email',
                    },
                ]}
                labelCol={{

                    span: 6,
                }}
                wrapperCol={{
                    span: 8,
                }}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name='question'
                label="找回密码问题： "
                rules={[
                    {
                        type: 'email',
                    },
                ]}
                labelCol={{

                    span: 6,
                }}
                wrapperCol={{
                    span: 8,
                }}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name='answer'
                label="找回密码答案："
                rules={[
                    {
                        type: 'email',
                    },
                ]}
                labelCol={{

                    span: 6,
                }}
                wrapperCol={{
                    span: 8,
                }}
            >
                <Input />
            </Form.Item>
            <Form.Item

            >

                <Space>
                    <Button type="primary" htmlType="submit">
                        保存
                    </Button>
                    <span>
                        <a>忘记密码了？</a>
                    </span>
                </Space>
            </Form.Item>
        </Form>
    );

}

export default Message